<template>
  <div>
    <Header></Header>
    <div class="top-home">
      <div id="demo" class="carousel slide" data-bs-ride="carousel">
        <!-- 指示符 -->
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
          <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
          <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
        </div>
        <!-- 轮播图片 -->
        <div class="carousel-inner mt-4">
          <div class="carousel-item active">
            <!-- <img src="http://127.0.0.1:8181/static/index1.png" class="d-block img-book" style="width:100%"> -->
            <img src="/static/img/index1.png" class="d-block img-book" style="width:100%">
          </div>
          <div class="carousel-item">
            <img src="/static/img/index2.png" class="d-block img-book" style="width:100%">
          </div>
          <div class="carousel-item">
            <img src="/static/img/index3.png" class="d-block img-book" style="width:100%">
          </div>
        </div>
        <!-- 画布 -->
        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop"
          aria-labelledby="offcanvasWithBackdropLabel">
          <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">使用背景画布</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
          </div>
          <div class="offcanvas-body">
            <p>正文内容不可滚动</p>
          </div>
        </div>
        <!-- 左右切换按钮 -->
        <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
          <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
          <span class="carousel-control-next-icon"></span>
        </button>
      </div>
      <section class="top pt-2">
        <ul class="top-home-tag">
          <li class="top-home-btn">
            <a href="/male" class="auto-height">
              <img src="/static/img/male.png" alt="男生" class="img-tag img-book">
              <!-- <p class="top-font">男生</p> -->
            </a>
          </li>
          <li class="top-home-btn">
            <a href="/female">
              <img src="/static/img/female.png" alt="女生" class="img-tag img-book">
              <!-- <p class="top-font">女生</p> -->
            </a>
          </li>
          <li class="top-home-btn">
            <a href="/category">
              <img src="/static/img/category.png" alt="分类" class="img-tag img-book">
              <!-- <p class="top-font">分类</p> -->
            </a>
          </li>
          <li class="top-home-btn">
            <a href="/rank">
              <img src="/static/img/rank.png" alt="排行" class="img-tag img-book">
              <!-- <p class="top-font">排行</p> -->
            </a>
          </li>
        </ul>
      </section>
    </div>
    <book-Box></book-Box>
  </div>

</template>

<script>
import Header from './components/Header.vue'
import BookBox from '@/components/BookBox.vue'

export default {
  components: {
    Header,
    BookBox
  },
  data() {
    return {
      flag: false,
      keyword: ''
    }
  },
  methods: {
    reTheme() {
      this.flag = !this.flag
      if (this.keyword != null && this.keyword !== '') {
        this.$http.get('api/search?keyword=' + this.keyword).then((response) => {
          this.booklist = response.data.data
          this.$refs.keyword.popover(response.data.msg)
        })
      }
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
